<template>
  <!--  用户列表-->
<!--  {{JSON.stringify(props.userList)}}-->
  <a-list
    item-layout="horizontal"
    :data-source="props.userList"
    class="user-list"
  >
    <template #renderItem="{ item }">
      <a-list-item class="user-list-item">
        <template #actions>
          <a key="list-loader-more" @click="showModal(item)">more</a>
        </template>
        <a-skeleton avatar :title="false" :loading="!!item.loading" active>
          <a-list-item-meta
            :description="item.userProfile"
          >
            <template #title>
              <a @click="showModal(item)">{{ item.userName }}</a>
            </template>
            <template #avatar>
              <a-avatar :src="item.userAvatar" />
            </template>
          </a-list-item-meta>
          <a-tag :color="item.userRole=='user'?'#fc5531':'#1890ff'">{{item.userRole}}</a-tag>
        </a-skeleton>
      </a-list-item>
    </template>
  </a-list>

  <div>
    <a-modal style="width: 700px" v-model:visible="visible" title="User Info" @ok="handleOk">
      <a-descriptions  bordered >
        <a-descriptions-item :span="2" label="UserName">{{user.userName}}</a-descriptions-item>
        <a-descriptions-item :span="1" label="Role"><a-tag color="#55acee">{{user.userRole}}</a-tag></a-descriptions-item>
        <a-descriptions-item :span="5" label="Profile">
          <a-tag color="#3b5999">{{user.userProfile}}</a-tag>
        </a-descriptions-item>
        <a-descriptions-item :span="3" label="CreateTime">{{formatDateTime(user.createTime)}}</a-descriptions-item>
      </a-descriptions>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import gege from "@/assets/gege.jpg";
import logo1 from "@/assets/logo1.jpg";
import { toRefs, withDefaults, defineProps, ref } from "vue";

interface Prpos {
  userList: any[];
}
function formatDateTime(date: string): string {
  const datetime = new Date(date);
  const year = datetime.getFullYear();
  const month = String(datetime.getMonth() + 1).padStart(2, '0');
  const day = String(datetime.getDate()).padStart(2, '0');
  const hour = String(datetime.getHours()).padStart(2, '0');
  const minute = String(datetime.getMinutes()).padStart(2, '0');
  const format = `${year}-${month}-${day} ${hour}:${minute}`;
  return format;
}
const props = withDefaults(defineProps<Prpos>(), {
  userList: () => [],
});

let user = ref({
  id: "",
  userName: "",
  userAvatar: "",
  userProfile: "",
  userRole: "",
  createTime: "",
  updateTime: ""
});

const visible = ref<boolean>(false);
const handleOk = (e: MouseEvent) => {
  // console.log(e);
  visible.value = false;
};

const showModal = (item:any) => {
  user.value = item;
  visible.value = true;
};
</script>

<style scoped lang="less">
.user-list {
  //background-color: #2c3e50;
  width: 90%;
  //background-color: #42b983;
  .user-list-item {

  }
}
</style>
